<template>
  <div class="langwrap">
    <img class="logo" src="../../../../assets/wapimgs/logos.png" alt />
    <h2>Welcome to Covestro</h2>
    <p>
      <span>Select Language</span>
      <span>选择语言</span>
    </p>
    <ul class="langul">
      <li @click="goToSite('en')">English</li>
      <li @click="goToSite('zh')">中文</li>
    </ul>
    <CookiesWarp @saveCookies2="saveCookies2" @closeFun="closeFun" v-if="saveCookies=='show'" />
  </div>
</template>

<script>
import api from "servicePath/index";
import { mapState, mapMutations } from 'vuex'
import CookiesWarp from 'componentsPath/cookiesWrap/wap/index'

export default {
  components: {
    CookiesWarp
  },
  data() {
    return {
      saveCookies: '',
      siteLang: ''
    };
  },
  mounted() {},
  methods: {
    ...mapMutations(['changeLang']),
    saveCookies2 () {
      this.changeLang(this.siteLang)
      this.$nextTick(() => {
        this.$router.replace('/foundation/wap/home')
      })
    },
    goToSite(type) {
      this.saveCookies = 'show'
      this.$i18n.locale = type;
      this.changeLang(type);
      this.siteLang = type
    },
    closeFun () {
      this.saveCookies = ''
      this.siteLang = ''
    }
  }
};
</script>

<style lang="scss" scoped>
.langwrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-top: 20%;
  .logo {
    width: 130px;
    height: 130px;
    display: block;
    margin: 0 auto;
  }
  h2 {
    font-size: 30px;
    padding-top: 40px;
  }
  p {
    padding-top: 114px;
    span {
      display: block;
      color: #B4B9C5;
      padding-bottom: 10px;
    }
  }
  .langul {
    margin-top: 20px;
    width: 80%;
    li {
      text-align: center;
      background: #fff;
      border-radius: 6px;
      border: none;
      -moz-box-shadow: 1px 1px 14px 5px #f0f0f0;
      -webkit-box-shadow: 1px 1px 14px 5px #f0f0f0;
      box-shadow: 1px 1px 14px 5px #f0f0f0;
      padding: 18px 15px;
      margin-bottom: 15px;
      letter-spacing: 1px;
    }
  }
}
</style>